<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
	/*
	 	父子关系
	 * */
		ul>li{
			background-color: pink;
		}
		/*
		 	后代关系，（不一定要相邻
		 * */
		ul li{
		
		}
		
		.sub_nav>li{
			background-color: skyblue;
		}
		
		/*li:first-child>ul>li{
			background-color: blue;
		}*/
		/*
		 
		 * 相邻选择器，控制相邻的最近的那个元素，只能单体控制
		 * */
		ul+div{
			background:skyblue;
		}
		/*
		 兄弟选择器，控制紧跟在ul后面的所以div ,群体控制。
		 * */
		ul~div{
			background: skyblue;
		}
	</style>
	<body>
		<li>我是在外面的Li</li>
		<ul>
			<li>
				<ul class="sub_nav">
					<li>二级li</li>
					<li>二级li</li>
					<li>二级li</li>
				</ul>
			</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<div>我现在紧跟在ul标签后面</div>
		<div>我现在紧跟在div标签后面</div>
	</body>
</html>
